<div id="warseadmin">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">仓库（{$warsename}）人员编辑</h4>
    </div>
    <div class="modal-body">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div class="alert alert-dismissable alert-info">
                    <button type="button" class="close">×</button>
                    <p></p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <div class="panel panel-info">
                    <div class="panel-heading">现有员工</div>
                    <div class="div-scroll" style="height:40vh">
                        <table class="table table-hover">
                            <tbody>
                            <tr v-for="item in warehouseuser" :key="item.id">
                                <td @click="changedepart(item.department_id)">{{item.department_name}}</td>
                                <td>{{item.username}}</td>
                                <td>{{item.position_name}}</td>
                            </tr>
                            <tr style="text-align: center;" v-if="warehouseuser.length==0">
                                <td colspan="3" class="no_date">{:strtoupper(lang('no_data'))}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="panel panel-default">
                    <div class="panel-heading">部门列表</div>
                    <div class="div-scroll" style="height:40vh">
                        <table class="table table-hover">
                            <tbody>
                            <tr>
                                <td>
                                    <select class="form-control" v-model="country_id" @change="changecountry">
                                        <option value="0">全球</option>
                                        {volist name='countrys' id="val"}
                                        <option value="{$val.id}">{$val.name}</option>
                                        {/volist}
                                    </select>
                                </td>
                            </tr>
                            <tr v-for="item in department" :key="item.id">
                                <td :style="'padding-left:'+item.level+'rem'" @click="changedepart(item.id)">
                                    {{item.langname}}
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="panel panel-default">
                    <div class="panel-heading">部门员工</div>
                    <div class="div-scroll" style="height:40vh">
                        <table class="table table-hover">
                            <tbody>
                            <tr v-for="item in adminuser" :key="item.id">
                                <td width="10%"><input type="checkbox" @click="onesel(item.id)" :checked="item.is_che">
                                </td>
                                <td>{{item.nickname}}</td>
                                <td>{{item.warehousename}}</td>
                            </tr>
                            <tr style="text-align: center;" v-if="adminuser.length==0">
                                <td colspan="3" class="no_date">{:strtoupper(lang('no_data'))}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal"><span
                class="glyphicon glyphicon-remove"></span>取消
        </button>
        <button type="button" :disabled="isdisadble" @click="savebtn" class="btn btn-primary" style="padding-left:24px;padding-right:24px">
            <span class="glyphicon glyphicon-floppy-disk"></span>保存
        </button>
    </div>
    <input type="hidden" id="warehouse_id" name="warehouse_id" value="{$id|default=''}">
</div>
<script>
    var table = new Vue({
        el: '#warseadmin',
        data: {
            department: [],//部门
            country_id: 1,//国家
            adminuser: [],//员工
            checkall: [],
            isdisadble: false,
            warehouseuser: [],//现有员工
        },
        methods: {
            //获取对应国家下的部门
            getdata(){
                $.ajax({
                    url: '/admin/api/postionfrmaes',
                    data: {
                        country_id: this.country_id,
                        table: 'department',
                        lang: lang = $('#lang').text(),
                    },
                    type: 'post',
                    dataType: 'json',
                    success: (data) => {
                        this.department = data;
                    }
                })
            },
            //选择的人
            onesel(id) {
                if (this.checkall.indexOf(id) == -1) {
                    this.checkall.push(id)
                } else {
                    this.checkall.splice(this.checkall.indexOf(id), 1)
                }
            },
            //数据的保存
            savebtn(){
//                this.isdisadble=true;
                $.ajax({
                    url: '/admin/warehouses/warseadmin',
                    data: {
                        admin_id: this.checkall,//之前就存在的值
                        substn: '',
                        warehouse_id: $('#warehouse_id').val()
                    },
                    type: 'post',
                    dataType: 'json',
                    success: (data) => {
                        if (data.status != 1) {
                            change_mes_type('.modal-body .alert', data.status)
                            $('.modal-body .alert').show()
                            $('.modal-body .alert p').html('*' + data.msg + '<br>')
                        } else {
                            change_mes_type('#headeralert', data.status)
                            $('#headeralert').show()
                            $('#headeralert p').html('*' + data.msg + '<br>')
                            $('#warehouse_adminModal').modal('toggle')
                        }
                        this.isdisadble=false;
                    }
                })
            },
            //改变国家
            changecountry(){
                this.getdata();
            },
            //获取对应部门员工
            changedepart(dempartment_id){
                $('.loding').show();
                $.ajax({
                    url: '/admin/warehouses/warseadmin',
                    data: {
                        getadmin: '',
                        dempartment_id,
                        warehouse_id: $('#warehouse_id').val()
                    },
                    type: 'post',
                    dataType: 'json',
                    success: (data) => {
                        this.adminuser = data.adminuser;//该部门下的员工，存在勾选，不存在不勾选
                        this.checkall = data.checkall;//现有员工ids
                        this.warehouseuser = data.warehouseuser;//现有员工名称
                        this.getdata();
                        $('.loding').hide();
                    }
                })
            }
        },
        created(){
            this.changedepart();
        }
    })
</script>